<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      main {
        width: 300px;
        margin: 0 auto;
      }
      h1 {
        text-align: center;
      }
      .item{
          margin-left: 5px;
        position: relative;
      }
      .box{
          display: flex;
          justify-content: space-around;
      }
      img{
          border: 1px solid;
          transform: rotateX(0deg);
          transition: all 0.5s;
      }
      .back{
          width: 120px;
          height: 75px;
          background-color: coral;
          text-align: center;
          line-height: 75px;
          border: 1px solid coral;
          opacity: 0;
          /* z-index: -1; */
          position: absolute;
          top: 0;
          left: 0;
          transform: rotateX(-180deg);
          transition: all 0.5s;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>热门品牌推荐</h1>
      <div class="content">
        <div class="box">
          <div class="item">
            <img src="img/11.jpg" alt="" />
            <div class="back">美丽</div>
          </div>
          <div class="item">
            <img src="img/22.jpg" alt="" />
            <div class="back">美丽</div>
          </div>
        </div>
        <div class="box">
          <div class="item">
            <img src="img/33.jpg" alt="" />
            <div class="back">美丽</div>
          </div>
          <div class="item">
            <img src="img/44.jpg" alt="" />
            <div class="back">美丽</div>
          </div>
        </div>
        <div class="box">
          <div class="item">
            <img src="img/55.jpg" alt="" />
            <div class="back">美丽</div>
          </div>
          <div class="item">
            <img src="img/66.jpg" alt="" />
            <div class="back">美丽</div>
          </div>
        </div>
        <div class="box">
          <div class="item">
            <img src="img/77.jpg" alt="" />
            <div class="back">美丽</div>
          </div>
          <div class="item">
            <img src="img/88.jpg" alt="" />
            <div class="back">美丽</div>
          </div>
        </div>
      </div>
    </main>
    <script src="jQuery.js"></script>
    <script>
          $('.item').hover(
        function() {
          $(this)
            .find('img')
            .stop()
            .animate({}, function() {
              $(this).css({ transform: 'rotateX(-180deg)' });
            });
          $(this)
            .find('.back')
            .stop()
            .animate({}, function() {
              $(this).css({ transform: 'rotateX(0deg)', opacity: 1});
            });
        },
        function() {
          $(this)
            .find('img')
            .stop()
            .animate({}, function() {
              $(this).css({ transform: 'rotateX(0deg)' });
            });
          $(this)
            .find('.back')
            .stop()
            .animate({}, function() {
              $(this).css({ transform: 'rotateX(-180deg)',opacity: 0});
            });
        }
      );
    </script>
  </body>
</html>
